/*评分项设置*/
<template>
  <div>
    <condition-card @reset="resetSearch" @search="onSearch" label-position="right" label-width="150px">
      <el-row :gutter="24" style="height: 50px;">
        <!-- 评分项类型 -->
        <el-col :span="8">
          <el-form-item :label="$t('scoringItemSetting.scoringItemType')">
            <el-select v-model="queryForm.condition.type"  clearable  style="width: 100%">
              <el-option  label="专家组"  :value="1"></el-option>
              <el-option  label="管理员"  :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 年度 -->
        <el-col :span="8">
          <el-form-item :label="$t('scoringItemSetting.year')" size="small" >
            <el-date-picker
              :placeholder="$t('scoringItemSetting.pleaseSelect')"
              style="width: 100%"
              v-model="queryForm.condition.year"
             
              type="year"
              value-format="yyyy"
              format="yyyy">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!-- 评分项名称 -->
        <el-col :span="8">
          <el-form-item :label="$t('scoringItemSetting.nameOfScoringItem')">
            <el-input v-model="queryForm.condition.name" 
              :placeholder="$t('scoringItemSetting.pleaseEnter')">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </condition-card>
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
      <h1 class="condition-title">{{$t('scoringItemSetting.listOfScoringItems')}}</h1>
      <div class="edu-opertion-bar sub-title">
        <div class="float-right" style="display: flex;">
          <el-button type="primary" style="margin-left:10px" @click="scoreAdd">{{$t('scoringItemSetting.scoringSet')}}</el-button><!-- 评分比例设置 -->
          <el-button type="primary" style="margin-left:10px" @click="increased">{{$t('scoringItemSetting.newlyAdded')}}</el-button>
        </div>
      </div>
      <edu-table :pagination="false" :selection='false' :orderFixed='false' :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini" @selection-change="handleSelectionChange">
        <edu-table-column :label="$t('scoringItemSetting.year')" prop="year"></edu-table-column>
        <edu-table-column :label="$t('scoringItemSetting.nameOfScoringItem')" prop="name"></edu-table-column>
        <edu-table-column :label="$t('scoringItemSetting.score')" prop="upperLimit">
          <template slot-scope="scope">
            {{ scope.row.upperLimit +'~'+ scope.row.lowerLimit }}
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('scoringItemSetting.scoringItemType')" prop="type">
          <template slot-scope="scope">
            <span v-if='scope.row.type==1'>专家组</span>
            <span v-if='scope.row.type==2'>管理员</span>
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('common.text.operation')" fit prop="operate" width="150">
          <template slot-scope="props">
            <el-button type="text" :disabled="props.row.canEdit !=1" @click="editInternEval(props.row)">{{$t('scoringItemSetting.edit')}}</el-button>
            <el-button type="text" @click="examineDelete(props.row)">{{$t('scoringItemSetting.delete')}}</el-button>
            <!-- <el-button type="text" @click="selectEvalBackout(props.row)">{{$t('interdisciplinaryManagement.backout')}}</el-button> -->
          </template>
        </edu-table-column>
      </edu-table>
      <el-row type="flex" class="row-bg" justify="end">
        <el-col>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryForm.pageNum_"
            :page-sizes="[20, 40, 80, 100]"
            :page-size="queryForm.pageSize_"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryForm.total_"
            style="float:right;margin-top:10px"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog style="width: 100%;" :title="title" :before-close="cancel" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref='formName' :rules="rules" label-suffix="：">
        <!-- 评分项名称 -->
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('scoringItemSetting.nameOfScoringItem')" prop="name" :label-width="formLabelWidth">
              <el-input style="width:50%" :placeholder="$t('scoringItemSetting.pleaseEnter')" maxlength="64" v-model="form.name" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 评分项类型 -->
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('scoringItemSetting.scoringItemType')" prop="type" :label-width="formLabelWidth">
              <el-select style="width:50%" v-model="form.type" clearable :placeholder="$t('scoringItemSetting.pleaseSelect')">
                <el-option  label="专家组"  :value="1"></el-option>
                <el-option  label="管理员"  :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 分值 -->
        <el-row>
          <el-form-item :label="$t('scoringItemSetting.score')" required :label-width="formLabelWidth">
            <el-col :span="4">
              <el-form-item  prop="upperLimit" >
                <el-input :placeholder="$t('scoringItemSetting.pleaseEnter')" v-model="form.upperLimit" maxlength="4" style="width:100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col class="line" style="margin-left:30px" :span="1">-</el-col>
            <el-col :span="4">
              <el-form-item prop="lowerLimit">
                <el-input :placeholder="$t('scoringItemSetting.pleaseEnter')" v-model="form.lowerLimit" maxlength="4" style="width:100%"></el-input>
              </el-form-item>
            </el-col>
              <span style="color: red">(请输入大于等于0或小于等于100的数字，最多一位小数)</span> 
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">{{$t('common.btn.cancel')}}</el-button>
        <el-button type="primary" @click="determine('formName')">{{$t('common.btn.confirm')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog style="width: 100%;" :title="$t('scoringItemSetting.scoringSetting')" :before-close="setCancel" :visible.sync="dialogSettingVisible" :close-on-click-modal="false">
        <el-form :model="setForm" ref='setFormName' :rules="setRules" label-suffix="：">
          <!-- 年度 -->
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('scoringItemSetting.year')" prop="year" label-width="200px">
                <el-date-picker
                  :clearable="false"
                  @change="changeYear"
                  style="width:60%"
                  v-model="setForm.year"
                  type="year"
                  :placeholder="$t('scoringItemSetting.pzlYear')">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 管理员评分比例 -->
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('scoringItemSetting.administratorRatingRatio')" prop="managerProportion" label-width="200px">
                <el-input :disabled="!canEdit" v-model="setForm.managerProportion" :placeholder="$t('scoringItemSetting.pleaseEnter')" maxlength="5" style="width:60%"></el-input>%
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 专家组评分比例 -->
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('scoringItemSetting.exeprtRatingRatio')" prop="specialistProportion" label-width="200px">
                <el-input :disabled="!canEdit" v-model="setForm.specialistProportion" :placeholder="$t('scoringItemSetting.pleaseEnter')" maxlength="5" style="width:60%"></el-input>%
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="setCancel">{{$t('common.btn.cancel')}}</el-button>
          <el-button type="primary" :disabled="!canEdit" @click="setDetermine('setFormName')">{{$t('common.btn.confirm')}}</el-button>
        </div>
      </el-dialog>

  </div>
</template>
<script>
// import { queryDic } from "common/src/api/dictionary";
// import UTILS from "common/src/utils/utils";
import competiManagementApi from 'common/src/api/subjectCompetition/competiManagement';
import moment from 'moment';
export default {
  
  data () {
    let cannotEnter = (rule, value, callback) => {
        let reg = /[`$]/im
        if (reg.test(value)) {
            return callback(new Error(this.$t('identificationToDoList.cannotContain')))
        } else if (value === '') {
            return callback(new Error(this.$t('internship.pleaseEnter')))
        }
        return callback()
    }
    return {
      canEdit: false,
      dialogSettingVisible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      setForm: {
        id: '',
        year: '',
        managerProportion: '',
        specialistProportion: ''
      },
      setRules: {
        year: [
          { required: true, message: this.$t('scoringItemSetting.pleaseSelect'), trigger: 'change' }
        ],
        managerProportion: [
          { required: true, validator: this.validatePop, trigger: 'blur' }
        ],
        specialistProportion: [
          { required: true, validator: this.validatePop, trigger: 'blur' }
        ]
      },
      form: {
        name: '',
        type: '',
        upperLimit: '',
        lowerLimit: ''
      },
      title: '',
      titleData: '',
      rules: {
        name: [
          { required: true, validator: cannotEnter, trigger: 'change' }
        ],
        type: [
          { required: true, message: this.$t('scoringItemSetting.pleaseSelect'), trigger: 'change' }
        ],
        upperLimit: [
          { required: true, validator: this.validateWeight, trigger: 'blur' }
        ],
        lowerLimit: [
          { required: true, validator: this.validateWeight, trigger: 'blur' }
        ] 
      },
      formLabelWidth: '120px',
      
      multipleSelection: [],
      provideData: {}, // 提供子组件表格数据
      queryForm: {
        pageNum_: 1,
        pageSize_: 20,
        total_: 0,
        condition:{
          year: null,
          name: '',
          type: ''
        }
      },
      queryForm1: {
        collegeAcademy1: '',
        collegeAcademy2: '',
        collegeAcademy3: '',
        collegeAcademy4: '',
        collegeAcademy5: '',
        collegeAcademy6: '',
        collegeAcademy7: '',
        collegeAcademy8: '',
        collegeAcademy9: ''
      },
      
      options: {
        facultys: [],
        timeList: [],
        title: [],
        sex: [],
        auditStatus: [
          {
            label: '待提交',
            value: 0
          },
          {
            label: '待审核',
            value: 1
          },
          {
            label: '审核通过',
            value: 2
          },
          {
            label: '驳回',
            value: 3
          },
          {
            label: '待录入',
            value: 4
          }
        ]
      },
      dataList: [],
      breadPath: {
        label: this.$t('graduate.graduate'),
        key: "1",
        children: [
          {
            key: "2",
            label: ""
          }
        ]
      },
    };
  },
  mounted() {
    this.postProjectListPage(this.queryForm)
  },
  methods: {
    changeYear(val) {
      this.setForm.managerProportion = ''
      this.setForm.specialistProportion = ''
      let year = moment(val).format('YYYY')
      competiManagementApi.projectListPageGet(year).then(res => {
        if (res.data) {
          this.setForm.id = res.data.id
          this.setForm.year = res.data.year.toString()
          this.setForm.managerProportion = res.data.managerProportion
          this.setForm.specialistProportion = res.data.specialistProportion
          this.canEdit = res.data.canEdit
        } else {
          this.setForm.year = year
          this.setForm.id = ''
          this.setForm.managerProportion = ''
          this.setForm.specialistProportion = ''
          this.canEdit = true
        }
      })
    },
    // 弹框确定
    setDetermine(setFormName) {
      this.$refs[setFormName].validate((valid) => {
        if (valid) {
          if (this.setForm.id) {
            let obj = {
              id: this.setForm.id,
              year: Number(moment(this.setForm.year).format('YYYY')),
              managerProportion: Number(this.setForm.managerProportion),
              specialistProportion: Number(this.setForm.specialistProportion)
            }
            competiManagementApi.projectListSave(obj).then(res => {
              this.dialogSettingVisible = false
              this.$message.success(this.$t('internship.successfully'));
              this.$refs['setFormName'].resetFields()
              for (let key in this.setForm) {
                this.setForm[key] = ''
              }
            })
          } else {
            let obj = {
              year: Number(moment(this.setForm.year).format('YYYY')),
              managerProportion: Number(this.setForm.managerProportion),
              specialistProportion: Number(this.setForm.specialistProportion)
            }
            competiManagementApi.projectListSave(obj).then(res => {
              this.dialogSettingVisible = false
              this.$message.success(this.$t('internship.successfully'));
              this.$refs['setFormName'].resetFields()
              for (let key in this.setForm) {
                this.setForm[key] = ''
              }
            })
          }
        }
      })
    },
    // 弹框取消
    setCancel() {
      this.dialogSettingVisible = false
      this.$refs['setFormName'].resetFields()
      for (let key in this.setForm) {
        this.setForm[key] = ''
      }
    },
    // 评分项比例设置
    scoreAdd() {
      this.dialogSettingVisible = true
      let year = new Date().getFullYear()+ ''
      competiManagementApi.projectListPageGet(year).then(res => {
        this.setForm.id = res.data.id
        this.setForm.year = res.data.year.toString()
        this.setForm.managerProportion = res.data.managerProportion
        this.setForm.specialistProportion = res.data.specialistProportion
        this.canEdit = res.data.canEdit
      })
    },
    validateWeight(rule, value, callback) {
      if (value >= 0 && value<=100) {
          let expReg = /^([0-9]{1,3})(\.\d{1})?$/
          // let expReg = /^([1-9]|[1-9]\d{1,6})(\.\d{1,3})?$/;
          if (!value) {
              callback(new Error(this.$t('scoringItemSetting.pleaseEnterScore')))
          } else if (!expReg.test(value)) {
              callback(new Error(this.$t('scoringItemSetting.pleaseEnterScore')))
          } else {
              callback()
          }
      } else {
          callback(new Error(this.$t('scoringItemSetting.pleaseEnterScore')))
      }
    },
    validatePop(rule, value, callback) {
      if (value >= 0 && value<=100) {
          let expReg = /^([0-9]{1,3})(\.\d{1,2})?$/
          // let expReg = /^([1-9]|[1-9]\d{1,6})(\.\d{1,3})?$/;
          if (!value) {
              callback(new Error(this.$t('scoringItemSetting.plzCorrectPop')))
          } else if (!expReg.test(value)) {
              callback(new Error(this.$t('scoringItemSetting.plzCorrectPop')))
          } else {
              callback()
          }
      } else {
          callback(new Error(this.$t('scoringItemSetting.plzCorrectPop')))
      }
    },
    postProjectListPage(data) {
      competiManagementApi.projectListPage(data).then(res => {
        // console.log(res, 'dfd');
        this.dataList = res.data.list
        this.queryForm.total_ = res.data.total_
      })
    },
    // 重置
    resetSearch() {
      for (let key in this.queryForm.condition) {
        this.queryForm.condition[key] = '';
      }
      this.queryForm.pageNum_ = 1
      this.postProjectListPage(this.queryForm)
    },
    // 查询
    onSearch() {
      this.queryForm.pageNum_ = 1
      this.postProjectListPage(this.queryForm)
    },
    //点击出现弹框
    increased() {
      this.titleData = '新增'
      this.title = this.$t('scoringItemSetting.newScoringItems')
      this.dialogFormVisible = true;
    },
    editInternEval(data) {
      this.titleData = '编辑'
      this.title = this.$t('scoringItemSetting.editNewScorItems')
      this.dialogFormVisible = true;
      this.form = JSON.parse(JSON.stringify(data))
      // this.form = Object.assign({}, data)
    },
    // 删除
    examineDelete(data) {
      this.$delConfirm().then(() => {
        competiManagementApi.projectListPageRemoveById(data.id).then(res => {
          this.$message.success(this.$t('internship.successfully'));
          this.queryForm.pageNum_ = 1
          this.postProjectListPage(this.queryForm)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('internship.cancelOpera')
        });  
      });
    },
    handleSelectionChange() {

    },
    // 分页
    handleSizeChange(val) {
      this.queryForm.pageNum_ = 1
      this.queryForm.pageSize_ = val
      this.postProjectListPage(this.queryForm)
    },
    // 分页
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val
      this.postProjectListPage(this.queryForm)
    },
    //取消
    cancel() {
      this.form = {}
      this.$set(this.form, 'name', '')
      this.$refs['formName'].resetFields() 
      this.dialogFormVisible = false;
      
    },
    //确定
    determine(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (Number(this.form.upperLimit) > Number(this.form.lowerLimit)) {
            return this.$message.error(this.$t('scoringItemSetting.smallerInterval'));
          } else {
            if (this.titleData == '新增') {
              competiManagementApi.projectListPageAdd(this.form).then(res => {
                this.dialogFormVisible = false;
                this.$message.success(this.$t('internship.successfully'));
                this.$refs['formName'].resetFields() 
                this.queryForm.pageNum_ = 1
                this.postProjectListPage(this.queryForm)
              })
            } else {
              competiManagementApi.projectListPageEdit(this.form).then(res => {
                this.dialogFormVisible = false;
                this.$message.success(this.$t('internship.successfully'));
                this.$refs['formName'].resetFields() 
                this.queryForm.pageNum_ = 1
                this.postProjectListPage(this.queryForm)
              })
            }
          }
        }
      });
    }
  }
}

</script>

